<template>
  <div class="detail">
    <div class="info">
      <p>商家信息</p>
      <li>
        <span>地址：</span>
        <span class="right">{{ shop.address }}</span>
      </li>
      <li>
        <span>店铺分配：</span>
        <span class="right">{{ shop.category }}</span>
      </li>
      <li>
        <span>营业时间：</span>
        <span class="right">{{ shop.work_time }}</span>
      </li>
      <li @click="showImage = true">
        <span>安全许可证：</span>
        <i class="iconfont icon-zuojiantou icon right"></i>
      </li>
    </div>
    <div class="pic" v-if="showImage">
      <img :src="imageUrl + shop.license_img" alt="" />
    </div>
    <div class="mask" v-if="showImage" @click="showImage = false"></div>
  </div>
</template>

<script>
import { getShopDetail } from '@/network/getData';
import { imageUrl } from '@/config/env';

export default {
  data() {
    return {
      imageUrl,
      shop_id: null,
      shop: {},
      showImage: false
    };
  },
  created() {
    this.shop_id = this.$route.query.shopId;
    this.initData();
  },
  methods: {
    async initData() {
      const res = await getShopDetail(this.shop_id);
      this.shop = res.data;
      console.log(res);
    }
  }
};
</script>

<style lang="less" scoped>
.detail {
  width: 100%;
  height: 100%;
}

.info {
  margin-top: 10px;
  background-color: #fff;
  p {
    line-height: 35px;
    padding: 0 10px;
    color: #222;
    border-bottom: 1px solid #eee;
  }
  li {
    line-height: 35px;
    padding: 0 10px;
    border-bottom: 1px solid #eee;
    font-size: var(--font-size);
    // span:first-child {
    //   display: inline-block;
    //   width: 100px;
    // }
  }
}
.pic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  img {
    width: 300px;
  }
}
</style>
